<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue text-white" :isBack="false">
			<block slot="content">搜索</block>
			<block slot="right">
				<view class="action">
					<view class="cu-load load-cuIcon" :class="isLoad?'loading':'over'"></view>
				</view>
			</block>
		</cu-custom>
		<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="输入搜索的关键词" confirm-type="search" v-model="title"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-gradual-green shadow-blur round" @tap="search()">搜索</button>
			</view>
		</view>
		<scroll-view scroll-y scroll-with-animation enable-back-to-top class="margin-top-xl">
			<block v-for="(item, index) in itemList" :key="index">
				<article-card :item='item'></article-card>
			</block>
		</scroll-view>
		<uni-load-more iconType="auto" :status="status" />
	</view>
</template>

<script>
	import * as article from '@/api/blog/article/article.js'
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				isLoad: false,
				title: '',
				status: 'init',
				pages: 0,
				pageNumber: 1,
				itemList: []
			}
		},
		onReachBottom() {
			// 上拉加载下一页
			if (this.status === 'more') {
				this.search(this.pageNumber + 1)
			}
		},
		methods: {
			search(pageNumber) {
				if (!this.title) {
					this.$tools.showToast({
						msg: '请输入关键字进行搜索'
					})
					return false;
				}
				if (pageNumber) {
					this.status = 'loading'
					this.pageNumber = pageNumber
				} else {
					this.status = 'init'
					this.pages = 0
					this.pageNumber = 1
					this.itemList = []
					this.isLoad = true
				}
				article.getPage({
					pageNumber: this.pageNumber,
					title: this.title
				}).then(res => {
					if (this.pageNumber = 1) {
						this.isLoad = false
					}
					if (res.code === 1) {
						const data = res.data
						this.pages = data.pages
						if (this.pages == 0) {
							this.status = 'noData'
						} else {
							this.itemList = this.itemList.concat(data.rows)
							console.log(this.itemList.length)
							if (this.pages <= this.pageNumber) {
								this.status = 'noMore'
							} else {
								this.status = 'more'
							}
						}
					}
				})
			}
		}
	}
</script>

<style>
	.logo {
		text-align: center;
		margin-top: 10rpx;
	}

	.logo image {
		height: 190rpx;
		width: 190rpx;
	}

	.no-result {
		margin: 10rpx 0;
		text-align: center;
	}

	.tip {
		margin-left: 30rpx;
	}
</style>
